<template>
  <div class="home-wrapper">
    <!-- 头部 -->
    <home-header></home-header>
    <!-- 主体部分 -->
    <div class="main-container">
      <!-- 左侧边菜单栏 -->
      <sidebar class="sidebar-container" :data='menuList&&menuList.children'></sidebar>
      <!-- 菜单内容显示部分 -->
      <div class="content-container">
        <!-- 导航栏 -->
        <!--<navbar></navbar>-->
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
        <div v-if="this.$router.app._route.name === '首页'">
          <MainContext></MainContext>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Sidebar from '@/components/common/SideBar'
  import HomeHeader from '@/components/header/Header'
  import {mapGetters, mapMutations} from 'vuex'
  import {apiGetMenuList} from '@/api/login'
  import MainContext from '@/components/main/Main.vue'

  export default {
    name: 'home',
    components: {
      Sidebar,
      HomeHeader,
      MainContext
    },
    computed: {
      ...mapGetters(['menuList'])
    },
    created: function () {
      if (this.menuList == null) {
        this.getMenu()
      }
    },
    methods: {
      ...mapMutations(['SET_MENU_LIST']),
      getMenu () {
        apiGetMenuList().then(response => {
          var _menuListNew = response.data.menu
          this.SET_MENU_LIST(_menuListNew)
        }).catch(() => {
          // removeToken()
          // this.$router.push({path:'/login'})
        })
      },
      logout () {
        this.$store.dispatch('Logout').then(() => {
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .home-wrapper {
    min-height: 100%;
    width: 100%;
    .main-container {
      height: 100%;
      padding-top: 60px;
      padding-left: 180px;
      transition: margin-left 0.28s ease-out;
      .content-container {
        height: calc(100% - 60px);
        /*margin-left: 180px;*/
        padding: 15px;
      }
      .sidebar-container {
        transition: width 0.28s ease-out;
        width: 180px;
        min-height: 100%;
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none
        }
      }
    }
  }

  select[data-v-a078dc08] {
    font-size: 14px;
    height: 36px;
    border: 1px solid #bfcbd9;
    color: #bfcbd9;

  }
</style>
